<template>
	<el-dialog
		:title="title"
		:visible.sync="dialogVisible"
		width="50%"
	>
		<el-form
			ref="form"
			:model="form"
			label-width="150px"
		>
			<el-form-item
				label="代理商名称"
				prop="company"
				:rules="[{required: true, message: '请输入代理商名称'}]"
			>
				<el-input
					size="small"
					v-model="form.company"
					placeholder="代理商名称"
				></el-input>
			</el-form-item>
			<el-form-item
				label="用户名称"
				prop="username"
				:rules="[{required: true, message: '请输入用户名称'}]"
			>
				<el-input
					size="small"
					v-model="form.username"
					placeholder="用户名称"
				></el-input>
			</el-form-item>
			<el-form-item
				label="手机号码"
				prop="phone"
				:rules="[{required: true, message: '请输入手机号码'}]"
			>
				<el-input
					size="small"
					v-model="form.phone"
					placeholder="手机号码"
				></el-input>
			</el-form-item>
			<el-form-item
				label="地区"
				prop="area"
				:rules="[{required: true, message: '请选择地区'}]"
			>
				<el-cascader
					style="width: 100%;"
					v-model="form.area"
					size="small"
					:filterable="true"
					:options="options"
					:props="{ expandTrigger: 'hover' }"
				></el-cascader>
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button
				size="small"
				@click="dialogVisible = false"
			>
				取 消
			</el-button>
			<el-button
				size="small"
				type="primary"
				:loading="submit_loading"
				@click="ensure"
			>
				确 定
			</el-button>
		</div>
	</el-dialog>
</template>

<script>
  import {options} from "../../../constant";

  export default {
    name: "edit",
    data() {
      return {
        dialogVisible: false,
        user: {},
        form: {
          id: '',
          company: '',
          username: '',
          phone: '',
          province: '',
          city: '',
          area: []
        },
        submit_loading: false,
        options: options
      }
    },
    computed: {
      title() {
        let user = this.user
        return user.id ? '正在编辑 ' + user.username : '新增代理商'
      },
      api() {
        let user = this.user
        return user.id ? '/api/v1/agent/update' : '/api/v1/agent/save'
      }
    },
    watch: {
      'form.area'([province, city]) {
        this.form.province = province
        this.form.city = city
      },
      dialogVisible(bool) {
        this.$fn.setTitle(bool ? this.title : '代理商管理')
      }
    },
    mounted() {
      this.init()
    },
    methods: {
      init() {
        this.$bus.$on('franchisee-edit', user => {
          this.dialogVisible = true
          this.user = user
          let area = []
          let form = {}
          Object.keys(this.form).forEach(key => {
            if (key === 'area') return
            form[key] = user[key] || ''
          })
          if (user.province && user.city) {
            area = [
              user.province,
              user.city
            ]
          }
          form.area = area
          this.form = form
          this.$nextTick(() => {
            this.$refs.form.clearValidate()
          })
        })
      },
      ensure() {
        this.$refs.form.validate(valid => {
          if (!valid) return
          this.submit_loading = true
          let {area, ...params} = this.form
          let action = '编辑'
          if (!params.id) {
            delete params.id
            action = '新增'
          }
          this.$axios.post(this.api, params)
            .then(res => {
              if (res.success) {
                this.$message({
                  message: action + '成功',
                  type: 'success'
                })
                this.dialogVisible = false
                this.$bus.$emit('franchisee-init')
              } else {
                this.$message({
                  message: action + '失败' + res.msg
                  , type: 'error'
                })
              }
            })
            .catch(() => {
              this.$message({
                message: action + '失败'
                , type: 'error'
              })
            })
            .finally(() => {
              this.submit_loading = false
            })
        })
      }
    }

  }
</script>

<style scoped>

</style>